<template>
   <div id="dashboard-con">
      <el-row :gutter="20">
         <el-col :span="6">
            <el-card class="view">
               <i class="el-icon-user-solid success"></i>
               <h2>21.2K</h2>
               <p>总访问人数</p>
               <span class="avatar"><img src="@/assets/avator/avator-1.png"></span>
               <span class="avatar"><img src="@/assets/avator/avator-2.png"></span>
               <span class="avatar"><img src="@/assets/avator/avator-3.png"></span>
               <span class="avatar"><img src="@/assets/avator/avator-4.png"></span>
               <span class="avatar"><img src="@/assets/avator/avator-5.png"></span>
            </el-card>
         </el-col>
         <el-col :span="6">
            <el-card class="view">
               <i class="el-icon-success blue"></i>
               <h2>16.2K</h2>
               <p>点击量（近30天）</p>
               <p class="subtext success">110.5%</p>
            </el-card>
         </el-col>
         <el-col :span="6">
            <el-card class="view">
               <i class="el-icon-s-promotion purple"></i>
               <h2>862.0</h2>
               <p>到达量（近30天）</p>
               <p class="subtext danger">110.5%</p>
            </el-card>
         </el-col>
         <el-col :span="6">
            <el-card class="view">
               <i class="el-icon-s-operation danger"></i>
               <h2>28.8%</h2>
               <p>转化率（近30天）</p>
               <p class="subtext success">65.5%</p>
            </el-card>
         </el-col>
      </el-row>
      <el-row :gutter="20">
         <el-col :span="18">
            <el-card class="last" style="height: 380px">
               <div slot="header">
                  <span>最近一周访问情况</span>
               </div>
               <div id="view-statistic"></div>
            </el-card>
         </el-col>
         <el-col :span="6">
            <el-card class="online">
               <div slot="header">
                  <span>当前在线</span>
               </div>
               <div>
                  <p>09:00:00</p>
                  <h1>126</h1>
                  <p class="text">在线访客数</p>
               </div>
            </el-card>
            <el-card class="online view" style="margin-top: 20px;">
               <div slot="header">
                  <span>当前在线</span>
               </div>
               <div>
                  <p>当前在线用户</p>
                  <span class="avatar"><img src="@/assets/avator/avator-2.png"></span>
                  <span class="avatar"><img src="@/assets/avator/avator-3.png"></span>
                  <span class="avatar"><img src="@/assets/avator/avator-1.png"></span>
                  <span class="avatar"><img src="@/assets/avator/avator-5.png"></span>
                  <span class="avatar"><img src="@/assets/avator/avator-4.png"></span>
               </div>
            </el-card>
         </el-col>
      </el-row>
      <el-row :gutter="20" class="bottom">
         <el-col :span="12">
            <el-card>
               <div slot="header">
                  <span>平均评价</span>
               </div>
               <div class="rate">
                  <h1>4.5</h1>
                  <el-rate v-model="rate"></el-rate>
               </div>
               <div style="clear: both"></div>
               <div class="progress">
                  <el-progress :percentage="50" :color="'#2fc25b'"></el-progress>
                  <el-progress :percentage="40" :color="'#1890ff'"></el-progress>
                  <el-progress :percentage="30" :color="'#ffc53d'"></el-progress>
                  <el-progress :percentage="20" :color="'#f04864'"></el-progress>
                  <el-progress :percentage="10"></el-progress>
               </div>
            </el-card>
         </el-col>
         <el-col :span="6">
            <el-card class="satisfaction">
               <div slot="header">
                  <span>客户满意度</span>
               </div>
               <div class="comment">
                  <h2>856</h2>
                  <div>
                     <i class="el-icon-success success"></i>
                     <p class="text">正面评论</p>
                  </div>
                  <h2>82%</h2>
               </div>
               <div style="clear: both"></div>
               <br>
               <div class="comment">
                  <h2>856</h2>
                  <div>
                     <i class="el-icon-success success"></i>
                     <p class="text">负面评论</p>
                  </div>
                  <h2>82%</h2>
               </div>
               <div style="clear: both"></div>
            </el-card>
         </el-col>
         <el-col :span="6">
            <el-card>
               <div slot="header">
                  <span>本月目标</span>
               </div>
               <div class="target">
                  <el-progress type="circle" :percentage="25" :width="150"></el-progress>
                  <p class="text">目标达成</p>
               </div>
            </el-card>
         </el-col>
      </el-row>
   </div> 
</template>

<script>
import $ from 'jquery'
import echarts from 'echarts'
export default {
   data(){
      return{
         rate: 4.5,
         chart: null,
      }
   },
   mounted(){
      this.initChart()
   },
   methods: {
      initChart(){
         this.chart = echarts.init($('#view-statistic')[0])
         let option = {
            title: {
               text: '最近一周浏览量'
            },
            xAxis: {
               type: 'category',
               boundaryGap: false,
               data: ['一', '二', '三', '四', '五', '六', '日']
            },
            yAxis: {
               type: 'value'
            },
            series: [{
               data: [820, 932, 901, 934, 1290, 1330, 1320],
               color: '#409eff',
               type: 'line',
               areaStyle: {},
               smooth: true
            }],
            tooltip: {
               show: true,
               trigger: 'axis'
            }
         }
         this.chart.setOption(option)
         window.onresize=()=>{
            this.chart.resize()
         }
      }
   }
}
</script>

<style lang="scss" scoped>
$text-color: #585858;
.el-row{
   margin-bottom: 20px;
}
.text{
   color: $text-color;
   font-size: 12px;
}
.success{
   color: #19be6b;
}
.danger{
   color: #ed4014;
}
.blue{
   color: #40a9ff;
}
.purple{
   color: #9254de;
}
.view{
   text-align: center;
   height: 190px;
   *{
      margin-bottom: 10px;
   }
   i{
      font-size: 40px;
   }
   p{
      color: $text-color;
      font-size: 12px;
   }
   .avatar{
      width: 30px;
      display: inline-block;
      border: 1px solid white;
      border-radius: 50%;
      overflow: hidden;
      height: 30px;
      box-sizing: border-box;
      margin-left: -8px;
      img{
         width: 100%;
      }
   }
   .subtext{
      margin-top: 20px;
      font-weight: bolder;
      font-size: 16px;
   }
}
#view-statistic{
   width: 100%;
   height: 100%;
}
.rate *{
   float: left;
}
.rate{
   h1{
      font-size: 50px;
      font-weight: normal;
   }
   /deep/ .el-rate{
      margin-top: 18px;
      margin-left: 20px;
   }
}
.progress{
   margin-top: 10px;
   /deep/ .el-progress{
      margin-bottom: 10px;
   }
}
.satisfaction{
   .comment{
      text-align: center;
      >*{
         display: inline-block;
         width: calc(100%/3);
      }
      i{
         font-size: 60px;
      }
      h2{
         position: relative;
         bottom: 20px;
      }
   }
}
.target{
   text-align: center;
}
.last{
   /deep/ .el-card__body{
      height: 320px;
   }
}
.online{
   text-align: center;
   height: 180px;
}
.bottom{
   /deep/ .el-card__body{
      height: 240px;
   }
}
</style>